<template>
  <BasicModal v-bind="$attrs"
              :width="1000"
              @register="registerModal"
              title="机头/仓位配置"
              @ok="handleSubmit">
    <div>
      <p>
        <vxe-button @click="addColumn()">最后增加一列</vxe-button>
        <vxe-button @click="removeColumn()">删除最后一列</vxe-button>

        <vxe-button @click="addRow()">新增最后一层</vxe-button>
        <vxe-button @click="removeRow()">删除最后一层</vxe-button>
        <!--        <vxe-button @click="updateSexFilter()">修改sex列筛选条件</vxe-button>-->
        <!--        <vxe-button @click="toggleFixedColumn(0, 'left')">切换第一列固定</vxe-button>-->
        <!--        <vxe-button @click="toggleFixedColumn(1, 'left')">切换第二列固定</vxe-button>-->
        <!--        <vxe-button @click="updateWidthColumn(2, 500)">修改第三列宽度</vxe-button>-->
        <!--        <vxe-button @click="updateWidthColumn(3, 500)">修改第四列宽度</vxe-button>-->
      </p>
      <vxe-table
        border
        height="300"
        align="center"
        :data="tableData">
        <vxe-column
          v-for="config in tableColumn"
          :key="config.key"
          :type="config.type"
          :field="config.field"
          :title="config.title"
          :fixed="config.fixed"
          :width="config.width"
          :filters="config.filters">
        </vxe-column>
      </vxe-table>
    </div>
  </BasicModal>
</template>
<script setup>
import {ref} from 'vue'
import {useMessage} from '@/hooks/web/useMessage';
import {BasicModal, useModalInner} from '@/components/Modal';
import {hpApi} from "@/api/core/terminalModel.api";

const emit = defineEmits(['success', 'register']);
const {createMessage} = useMessage();

const tableColumn = ref([
  {key: 99, title: '仓层', field: 'name', width: 150},
])
const tableData = ref([])
const id = ref("")
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  id.value = data.record.id;
  tableData.value = []
  tableColumn.value = [
    {key: 99, title: '仓层', field: 'name', width: 150},
  ]
  const hp = data.record.hp.split(',')
  for (let row = 0; row < hp[0]; row++) {
    const rowData = {};
    rowData.name = '第' + (row + 1) + '层';
    for (let column = 0; column < hp[1]; column++) {
      rowData[`field_${column}`] = (row+1)+'-'+column;
    }
    tableData.value[row] = rowData;
  }
  for (let column = 1; column < hp[1]; column++) {
    tableColumn.value.push({
      key: `key_${column}`,
      field: `field_${column}`,
      title: `仓列【${column}】`,
      width: 150
    })
  }
});
const rowMap = {};
const addColumn = () => {
  const columnIndex = tableColumn.value.length
  tableColumn.value.push({
    key: `key_${columnIndex}`,
    field: `field_${columnIndex}`,
    title: `仓列【${columnIndex}】`,
    width: 150
  })
  if (tableData.value.length <= 1) {
    const rowIndex = tableData.value.length <= 1 ? 0 : tableData.value.length;
    rowMap.name = '第' + (rowIndex + 1) + '层';
    tableColumn.value.forEach((val, index) => {
      if (val.field.indexOf('field') > -1) {
        rowMap[val.field] = (rowIndex + 1) + '-' + index;
      }
    })
    tableData.value[rowIndex] = rowMap;
  } else {
    tableData.value.map((item, index) => {
      item[`field_${columnIndex}`] = (index + 1) + '-' + columnIndex;
      tableData.value[index] = item;
    })
  }
}


const removeColumn = () => {
  if (tableColumn.value.length == 1) {
    return;
  }
  tableColumn.value.pop()
}
const addRow = () => {
  const newRowMap = {};
  const rowIndex = tableData.value.length;
  newRowMap.name = '第' + (rowIndex + 1) + '层';
  tableColumn.value.forEach((val, index) => {
    if (val.field.indexOf('field') > -1) {
      newRowMap[val.field] = (rowIndex + 1) + '-' + index;
    }
  })
  tableData.value.push(newRowMap);
}
const removeRow = () => {
  tableData.value.pop()
}
const toggleFixedColumn = (index, value) => {
  tableColumn.value[index].fixed = tableColumn.value[index].fixed ? null : value
}
const updateWidthColumn = (index, value) => {
  tableColumn.value[index].width = value
}

async function handleSubmit() {
  try {
    if (!(tableData.value.length >= 1 && tableColumn.value.length >= 2)) {
      createMessage.error('仓位配置错误,请重新配置！');
      return
    }
    setModalProps({confirmLoading: true});
    await hpApi(id.value, tableData.value.length + ',' + tableColumn.value.length).then(() => {
      closeModal();
      createMessage.success('机头/仓位配置成功！');
      emit('success');
    });
  } finally {
    setModalProps({confirmLoading: false});
  }
}
</script>

